/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
var todo = [
    '吃饭','睡觉','打豆豆'
];
var done = ['喝酒','蹦迪'];

const Inpt = document.querySelector('#title');
const todolist = document.querySelector('#todolist');
const todo_num = document.querySelector('#todocount');
const donelist = document.querySelector('#donelist');
const done_num = document.querySelector('#donecount');


function setPage(){
    var num = 1
    let ol_todo = ''
    todo.forEach( function(item,key){
        ol_todo += `
            <li>
                <input type="checkbox" class="select" index="${key}"/>
                <p onclick="edit(${num})" class="num" index="${key}">${item}</p>
                <input type="text" style="display:none" class="del" value="${todo[key]}">
                <a href="javascript:remove(${num})"  class="a" index="${key}">-</a>
            </li>
            `
        num++
    })  
    
    todolist.innerHTML = ol_todo
    todo_num.innerHTML=todo.length

    let ul_done = ''
    done.forEach( function(item,key){
        ul_done += `
            <li>
                <input type="checkbox" checked="checked"  class="select" index="${key}"/>
                <p onclick="edit(${num})" class="num" index="${key}">${item}</p>
                <input type="text" style="display:none" class="del" value="${done[key]}">
                <a href="javascript:remove(${num})" class="a" index="${key}">-</a>
            </li>
        `
        num++;
    })

    donelist.innerHTML = ul_done
    done_num.innerHTML=done.length

    const selectBtn = document.querySelectorAll('.select')
    selectBtn.forEach(function(item , key){
        item.addEventListener('click', function(){
           let father = item.parentNode.parentNode.id
            if(father == 'todolist' && item.checked == true){
                let str = todo[key]
                todo.splice(key,1)
                done.unshift(str)
                setPage()
            }else if(father == 'donelist' && item.checked == false){
                let str = done[key-todo.length]
                done.splice(key-todo.length,1)
                todo.unshift(str)
                setPage()
            }
        })
    })

    const num_btn = document.querySelectorAll('.num')
    const del_btn = document.querySelectorAll('.del')

     num_btn.forEach(function(item , key){
        item.addEventListener('click',function(){
            let father = item.parentNode.parentNode.id
            if(father == 'todolist'){
                num_btn[key].style.display = 'none'
                del_btn[key].style.display = 'inline'
                del_btn[key].setAttribute("onKeyDown",`keyDetection3(event,${key})`)
               
            }else if(father == 'donelist'){
                num_btn[key].style.display = 'none'
                del_btn[key].style.display = 'inline'
                del_btn[key].setAttribute("onKeyDown",`keyDetection3(event,${key})`)
            }
        })
    })
}

function keyDetection2(event,key){
    let temp = key
    if(event.keyCode==13) myFunction2(temp)
}
function  myFunction2(temp){
    let key8 = temp
    let Cstr = del_btn[temp].value
    console.log(key8)
    console.log(Cstr)
    num_btn[temp].style.display = 'inline'
    del_btn[temp].style.display = 'none'

    todo[temp] = Cstr
    setPage()
}
function keyDetection3(event,key){
    let temp = key
    if(event.keyCode==13) myFunction2(temp)
}
function  myFunction2(temp){
    let key8 = temp
    let Cstr = del_btn[temp].value
    console.log(key8)
    console.log(Cstr)
    num_btn[temp].style.display = 'inline'
    del_btn[temp].style.display = 'none'

    done[temp-todo.length] = Cstr
    setPage()
}

function myFunction(){
    let mainword = $('[name = "title"]').val().trim()

    todo.push(mainword)
    setPage()
    $('[name = "title"]').val('')
    return false
}

document.getElementById("title").setAttribute("onKeyDown","keyDetection(event)")

function keyDetection(event){
	if(event.keyCode==13) myFunction()
}

function remove(num){
    if(num>todo.length){
        num= num -todo.length
        done.splice(num-1,1)
        num--
    }else{
        todo.splice(num-1,1)
        num--
    }
    setPage()
}

